<template>
  <view>
    <u-modal
      v-model="show"
      :title-style="{ color: 'red' }"
      @cancel="cancel"
      @confirm="confirm"
      ref="uModal"
      :show-title="false"
      :async-close="true"
      :show-cancel-button="true"
      :confirm-color="'#FA5151'"
      :confirm-text="'去授权'"
      :confirm-style="{
        borderLeft: '1px solid rgba(0,0,0,0.1)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }"
    >
      <view class="slot-content">
        <view class="content_wrapper">
          <view class="logo_">
            <image src="/static/user/logo.png"></image>
          </view>
          <view class="main_wrapper">
            易联小铺商城需要得到您的授权，以便获
            取您的手机号，若手机号未注册将进入注册流程，注册即视为同意
          </view>
        </view>
      </view>
      <!--      <view slot="confirm-button">-->
      <!--        <button-->
      <!--          open-type="getPhoneNumber"-->
      <!--          class="button_wrapper"-->
      <!--          @getphonenumber="getPhoneNumber"-->
      <!--        >-->
      <!--          去授权-->
      <!--        </button>-->
      <!--      </view>-->
    </u-modal>
  </view>
</template>

<script>
const app = getApp();
import { getPhone } from "@/api/login/login";
export default {
  name: "AuthorizationPopup",
  data() {
    return {
      show: false,
      code: "",
    };
  },
  onShow() {
    if (uni.getStorageSync("token")) {
      this.show = false;
    }
  },
  methods: {
    async getPhoneNumber(e) {
      if (!e) {
        return;
      }
      //这里获取code
      if (uni.getStorageSync("token") && e.detail.code) {
        //获取手机号
        const getPhoneData = await getPhone(e.detail.code);
        if (getPhoneData.code === 0) {
          const { phoneNumber } = getPhoneData.data.phone_info;
          uni.setStorageSync("phoneNumber", phoneNumber);
          this.show = false;
          uni.showToast({
            title: "登录成功",
            icon: "success",
            duration: 2000,
          });
        } else {
          this.show = false;
          uni.showToast({
            title: "授权失败",
            icon: "error",
            duration: 2000,
          });
        }
      }
    },

    showToggle() {
      this.show = true;
    },
    confirm() {
      console.log("点击了确定");
      if (!uni.getStorageSync("token")) {
        //调用获取用户信息函数
        // const data = app.globalData.getUserProfile();
        uni.navigateTo({
          url: "/pages/empower/mp-weixin",
        });
        this.show = false;
      }
    },
    cancel() {
      console.log("点击了取消");
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.slot-content {
  font-size: rpx(14);
  font-weight: 400;
  color: #353535;
}

.content_wrapper {
  padding: rpx(28) rpx(25) rpx(34) rpx(24);
  > .logo_ {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: rpx(20);
    > image {
      width: rpx(50);
      height: rpx(50);
      vertical-align: middle;
    }
  }
}

.button_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: rpx(17);
  font-weight: normal;
  color: #fa5151;
}
</style>
